<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue框架 通过cdn方式加载Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <!-- 视图层 -->
     <div id="app">
        <!-- 1.文本插值语法 Mustache语法  -->
         {{msg}} 
         <!-- 2.v-html 将标签字符串解析成标签 -->
         <div v-html="a"></div>
         <!-- 3 动态绑定 绑定一个变量
          v-bind可以简写成: -->
         <div :title="我是一个div">块级元素</div>
         <!-- 4 动态绑定多个值 -->
         <section v-bind="obj">块级元素</section>
         <!-- 5 使用js表达式 -->
          {{3>5?'YES':'NO'}}
          <!-- reverse方法可以翻转数组元素
           split将字符串转为数组 
           join将数组转为字符串 ''用空格隔开-->
          {{msg.split(' ').reverse().join(' ')}}
          <!-- 给按钮绑定事件 v-on:事件类型 "事件处理程序"-->
           {{count}}
          <button v-on:click="handler">点击我</button>
          <!-- v-0nf 事件绑定简写@ -->
           <button @click="handler">点击我</button>
           <!-- 计算属性 处理响应式状态 -->
           {{rever}}
           <!-- 条件渲染v-if v-else-if v-else -->
           <div v-if="score>=90&&scoer<=100">优秀</div>
           <div v-else-if="score>=80&&score<=90">良好</div>
           <div v-else-if="score>=70&&score<80">中等</div>
           <div v-else>及格</div>
           <!-- 列表渲染 arr有几个对象生成几个li标签
            item 表示数组每一项 index 数组每一项对应索引 -->
           <ul>
            <li v-for="(item,index) in arr":key="item.id">
              {{index}}--{{item.name}}
            </li>
           </ul>
     </div>
     <script>
        const {createApp,ref,computed} = Vue;
        // 创建一个vue应用 mount()应用和视图层进行绑定
        createApp({
            // 应用入口函数
            setup(){
                const msg = ref('hello Vue3');
              const a = ref('<a href="https://www.baidu.com/">百度一下</a>');
              const title=ref('我是一个div');
              const obj=ref({
                id:'one',
                class:'two',
                style:'background-color:red'
              });
              const count =ref(0);
              
              const score =ref(75);

              const arr= ref([
                {
                id:1,
                name:'terry'
              },
              {
                id:2,
                name:'larry'
              },
              {
                id:3,
                name:'jerry'
              }
              ])
              //声明一个函数处理count自增
              const handler =()=>{
                count.value++
              }
              const rever =computed(()=>{
                //toUpperCase将小写的字符串转换成大写的字符串
                return msg.value.split(' ').reverse().join(' ').toUpperCase()
              })
                // 将状态暴露给模板 
                return {
                    msg,
                    a,
                    title,
                    obj,
                    count,
                    handler,
                    rever,
                    score,
                    arr
                }
            }
        }).mount('#app')
     </script>
</body>
</html>